<template>
  <div class="content-wrap">
    <table class="top-table">
      <tbody>
        <tr>
          <th colspan="5" class="table-title">
            供应链业务运营审批单
          </th>
        </tr>
        <tr>
          <td>项目名称</td>
          <td class="th-label">业务编号</td>
          <td style="width: 395px">test</td>
          <td class="th-label">业务编号</td>
          <td>him</td>
        </tr>
        <tr>
          <th rowspan="3" class="th-label">项目名称</th>
          <td class="th-label">业务编号</td>
          <td style="width: 394px">test</td>
          <td class="th-label">业务编号</td>
          <td>him</td>
        </tr>
        <tr>
          <td>项目名称</td>
          <td>test</td>
          <td>业务编号</td>
          <td>him</td>
        </tr>
        <tr>
          <td>项目名称</td>
          <td colspan="3">test</td>
        </tr>
        <tr>
          <td>项目名称</td>
          <td colspan="4">test</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.content-wrap {
  width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}
.top-table {
  border-collapse: collapse;
  width: 100%;

  th {
    background: #fff;
    line-height: 1.5;
    text-align: left;
  }

  td,
  th {
    border: 1px solid #cdcdcd;
    padding: 4px 10px;
    vertical-align: middle;
  }

  td {
    .code-example pre {
      margin: 0;
    }

    ul {
      margin: 0;
    }
  }
  .table-title {
    text-align: center;
    color: #000;
    font-size: 24px;
    font-weight: 600;
    background-color: #f2f3f5;
  }
}
.cccc {
  width: 70px;
  padding: 12px 12px;
  display: block;
  border-right: 1px solid #cdcdcd;
}
.th-label {
  width: 70px;
}
.merge-label {
  width: 70px;
}
</style>